<template>
    <el-form :model="form" label-width="100px">
    <el-form-item label="日期">
                        <el-col :span="13">
                          <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="form.ddtm"
                            style="width: 200px"
                            format="YYYY年MM月DD日"
                          ></el-date-picker>
                        </el-col>
                        </el-form-item>
    <el-form-item label="中文名称">
      <el-input style="width: 350px" v-model="form.cnnm"></el-input>
    </el-form-item>
  </el-form>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">搜索</el-button>
  </el-form-item>

  <!-- 数据表 -->
  <el-table
    ref="singleTable"
    :data="tableData"
    highlight-current-row
    style="width: 100%"
  >
    <el-table-column property="ddtm" label="日期" width="200">
    </el-table-column>
    <el-table-column property="cnnm" label="中文名称" width="100">
    </el-table-column>
    <el-table-column property="aiso" label="是否开启" width="150">
    </el-table-column>
    <el-table-column property="ennm" label="英文名称" width="150">
    </el-table-column>
    <el-table-column property="apsn" label="简称" width="200">
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-pagination
    background
    layout="prev, pager, next"
    :total="count"
    :current-page="page"
    :pageCount="pageCount"
    @current-change="changePage"
  >
  </el-pagination>
</template>
    <script>
    export default {
      name: "airportOpen",
      data() {
    return {
      tableDataType: 1,
      formLabelWidth: "120px", //表单文本宽度
      tableData: [{}],
      count: 0, //记录总数
      page: 1, //当前页码
      pageCount: "", //总页数
      form: {
        ddtm: "",
        cnnm: "",
      }
    }
    },
    methods: {
      combiningStrings(date){
      var mon= date.substring(4,7);
      var year = date.substring(11,15);
      var day = date.substring(8,10);
      switch (mon) {
        case"Jan":
          mon="01";
          break;
        case "Feb":
          mon="02";
          break;
        case "Mar":
          mon="03";
          break;
        case "Apr":
          mon="04";
          break;
        case "May":
          mon="05";
          break;
        case "Jun":
          mon="06";
          break;
        case "Jul":
          mon="07";
          break;
        case "Aug":
          mon="08";
          break;
        case "Sep":
          mon="09";
          break;
        case "Oct":
          mon="10";
          break;
        case "Nov":
          mon="11";
          break;
        case "Dec":
          mon="12";
          break;
      }
      let combineDate =(year+mon+day);
      return combineDate;
    },

      changePage(currentPage) {
      this.page = currentPage; 
      switch (this.tableDataType){
        case 1:
          this.fetchData();
          break;
        case 2:
          this.onSubmit();
          break;
      }
    },

    fetchData() {
      const pageNum = this.page;
      const pageSize = 10; // 设置每页显示的数据条数
      this.$axios
        .get("", { params: { pageNum, pageSize } })
        .then((response) => {
          const result = response.data.data;
          this.count = result.size;
          this.pageCount = Math.ceil(result.total / pageSize);
          this.tableData = result.list;
        })
        .catch((error) => {
          console.error(error);
        });
    },

    onSubmit(form){
      var ddtm = this.combiningStrings(this.form.ddtm.toString());
      var fide=this.form.fide;
      var code=this.form.code;
      const pageNum = this.page;
      const pageSize = 10; // 设置每页显示的数据条数
      this.$axios
        .get("", {params: {ddtm,cnnm, pageNum, pageSize}})
        .then((response) => {
          const result = response.data.data;
          this.count = result.size;
          this.pageCount = Math.ceil(result.total / 10);
          this.tableData = result.list;

          if(result.list.length!=0){
            this.tableDataType=2;
            this.$message.success({
              type:"success",
              message:"查询成功"
            })
          }
          if(result.list.length==0){
            this.tableDataType=1;
            this.$message.error({
              type:"error",
              message:"查询失败，没有数据"
            })
          }
        })
        .catch(() => {
          console.error(error);
        });
    },
    },
    mounted() {
      this.changePage(1);
    },
};
    </script>
    
    <style scoped>
    
    </style>